<template>
  <div class="BigBox">


    <div class="box">
      <!-- 头部 -->
      <vue-particles
        color="#fff"
        :particleOpacity="2"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="2"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="1"
        :linesDistance="20"
        :moveSpeed="0.5"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      ></vue-particles>
      <div class="top">
        <img src="../assets/image/logo.png" alt />
        <span>
          {{systemName}}
          <br />
          <b>Welcome to Smart Lighting Management Operating Platform</b>
        </span>
      </div>
      <!-- 登录部分 -->
      <!-- 旋转部分 -->
      <div class="rotate">
        <div class="rotate1">
          <div class="rotate2"></div>
        </div>
      </div>
      <div class="rigth">
        <ul class="list">
          <li :class="{color}" @click="set">
            <a href="javascript:;">账户密码登录</a>
          </li>
          <span>|</span>
          <li :class="{color2}" @click="set2">
            <a href="javascript:;">短信验证登录</a>
          </li>
        </ul>
        <!-- 账号登录 -->
        <div :class="{account}">
          <div>
            <ul class="sum">
              <li>
                <span>
                  <img src="../assets/image/user.png" alt />
                </span>
                <input type="text" v-model="form.login" placeholder="请输入账户" @keyup.enter="login" />
              </li>
              <li class="two">
                <span>
                  <img src="../assets/image/password.png" alt />
                </span>
                <input
                  type="text"
                  v-model="form.password"
                  placeholder="请输入密码"
                  v-show="pws"
                  @keyup.enter="login"
                />
                <input
                  type="password"
                  v-model="form.password"
                  placeholder="请输入密码"
                  v-show="!pws"
                  @keyup.enter="login"
                />
                <b :class="{Eye}"></b>
                <img src="../assets/image/lock.png" alt class="lock" @click="see" />
              </li>
              <li>
                <span>
                  <img src="../assets/image/aq.png" alt />
                </span>
                <input type="text" v-model="form.code" placeholder="请输入验证码" @keyup.enter="login" />
                <img
                  :src="'data:image/png;base64,'+form.image"
                  title="点击切换新验证码"
                  class="yz"
                  @click="obtain"
                />
              </li>
            </ul>
          </div>
          <br />
          <div class="yes">
            <el-button @click="login">登录</el-button>
          </div>
        </div>
        <!-- 手机登录 -->
        <div :class="{moble}">
          <ul class="phone">
            <form>
              <li>
                <span>
                  <img src="../assets/image/moble.png" alt />
                </span>
                <input type="text" v-model="sj.phone" placeholder="请输入手机号" />
              </li>
              <li>
                <span>
                  <img src="../assets/image/xinxi.png" class="as" alt />
                </span>
                <input type="text" v-model="sj.verifyCode" placeholder="请输入验证码" />
                <a href="javascript:;" @click="countDown">{{content}}</a>
              </li>
            </form>
          </ul>
          <div class="yes q">
            <!-- <a href="javascript:;" @click="mobleLogin">登录</a> -->
            <el-button @click="mobleLogin">登录</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <img src="../assets/image/foot.png" alt />
      <br />
      <p>Intelligent Lighting Management Operating Platform 版本1.20</p>
    </div>
  </div>
</template>
<script>
// import { mapState } from 'vuex'
import { mapMutations } from "vuex";
import page1 from "../assets/image/page/1.png"
export default {
  props: ["systemName"],
  data() {
    return {
      Eye: false,
      color: true,
      color2: false,
      account: false,
      moble: true,
      dialogFormVisible: false,
      content: "发送验证码",
      totalTime: 300,
      canClick: true,
      Verification: "",
      pws: false,
      // 账户登录
      form: {
        login: "",
        password: "",
        image: "",
        // 账号登录验证码
        code: "",
        type: ""
      },
      sj: {
        phone: "",
        verifyCode: ""
      },
      num: 1,
      ctx:""
    };
  },
  methods: {
    ...mapMutations("lamp", ["userID"]),
    set() {
      this.color2 = false;
      this.color = true;
      this.account = false;
      this.moble = true;
    },
    set2() {
      this.color2 = true;
      this.color = false;
      this.account = true;
      this.moble = false;
    },
    // 验证码计时
    eject() {
      this.dialogFormVisible = true;
    },
    // 密码显示
    see() {
      this.pws = !this.pws;
      this.Eye = !this.Eye;
    },
    //  手机号格式验证 以及 验证消息的判断
    countDown() {
      this.sj.type = 0;
      this.regular();
      if (this.num == 1) {
        return;
      }
      // 先请求过来之后再做下面的倒计时
      this.$http
        .get(
          `/api/threesuns/user/smsVerifyCode?phone=${this.sj.phone}&type=${this.sj.type}`
        )
        .then(res => {
          if (res.data.code == 400114) {
            this.$message.warning("此手机号暂未注册");
            return;
          }
          this.timer();
        });
    },
    //  账号登录
    login() {
      if (this.form.login.trim().length == 0) {
        this.$message.warning("账号不为空");
        return;
      } else {
        if (this.form.password.trim().length == 0) {
          this.$message.warning("密码不可为空");
          return;
        } else if (this.form.code.trim().length == 0) {
          this.$message.warning("验证码不可为空");
          return;
        }
        this.$http
          .post(`/api/threesuns/user/login`, this.form)
          .then(res => {
            if (res.data.code == 45008) {
              this.$message.error("密码错误");
              return;
            } else if (res.data.code == 40012) {
              this.$message.error("验证码错误");
              this.codes();
              return;
            } else if (res.data.code == 41001) {
              this.$message.error("账户错误");
              return;
              this.codes();
            } else {
              if (res.data.status == "success") {
                this.$message.success("登录成功");
                sessionStorage.setItem("token", res.data.data.token);
                sessionStorage.setItem("userId", res.data.data.userId);
                sessionStorage.setItem("userRole", res.data.data.userRole);
                this.$router.push("/steward");
              }
            }
          })
          .catch(err => {
            this.$message.error(err.data.success);
          });
      }
    },
    //  用户获取验证码
    obtain() {
      this.codes();
    },
    //  短信登录
    mobleLogin() {
      this.regular();
      if (this.num == 1) {
        return;
      } else {
        if (this.sj.verifyCode.trim().length == 0) {
          this.$message.error("请您输入验证码");
        } else {
          this.$http
            .post(`/api/threesuns/user/login`, this.sj)
            .then(res => {
              if (res.data.data.userRole === 0) {
                this.$message.success("登录成功,但此权限没有开放");
              }
            });
        }
      }
    },
    // 验证消息倒计时
    timer() {
      if (!this.canClick) return;
      this.canClick = false;
      this.content = this.totalTime + "s后重发送";
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.content = "重发送验证码";
          this.totalTime = 300;
          this.canClick = true;
        }
      }, 1000);
    },
    // 正则验证手机号 上面调用
    regular() {
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if (this.sj.phone == "") {
        this.$message.error("请您输入手机号");
        return;
      } else if (!reg.test(this.sj.phone)) {
        this.$message.error("请您输入正确的格式");
        return;
      } else {
        this.num = 0;
      }
    },
    codes() {
      this.$http.get(`/api/threesuns/user/imageVerifyCode`).then(res => {
        this.form.image = res.data.data.image;
      });
    }
  },
  mounted() {
    this.codes();
  },
  beforeDestroy() {
    this.timer();
  }
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}

.box {
  /* height: 100%; */
  height: 969px;
  background: url(../assets/image/rotate/6.jpg) no-repeat;
  color: #fff;
  width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}

.top {
  position: absolute;
  left: 80px;
  top: 59px;
  animation: sx 3s infinite linear;
}

.top span {
  color: #2378db;
  font-size: 30px;
  font-weight: 600;
  /* -webkit-text-stroke: 1px  #ccc; */
  margin-left: 25px;
  position: relative;
}

.top span b {
  width: 500px;
  color: #2378db;
  font-weight: 500;
  font-size: 14px;
  position: absolute;
  top: 35px;
  left: 0px;
}
/* 左边轮播 */
/* 右边登录 */

.rigth {
  width: 400px;
  height: 423px;
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid #03a8b6;
  position: absolute;
  right: 256px;
  top: 290px;
}

.rigth h2 {
  font-weight: 400;
  height: 110px;
  text-align: center;
  font-size: 33px;
  line-height: 110px;
}

.list {
  overflow: hidden;
  color: #03a8b6;
  position: relative;
}

.list span {
  position: absolute;
  left: 200px;
  top: 25px;
  font-size: 16px;
}

.list a {
  font-size: 16px;
  color: #555658;
}

.list li {
  float: left;
  border-bottom: 1px solid #03a8b6;
  width: 50%;
  text-align: center;
  height: 68px;
  line-height: 68px;
}

.sum {
  margin-top: 43px;
  position: relative;
}

.sum li {
  /* width: 100%;
  height: 53px;
  margin-top: 37px;
  position: relative; */
  text-align: center;
  margin-bottom: 26px;
}

.sum li input {
  width: 305px;
  height: 42px;
  background: none;
  color: #fff;
  font-size: 16px;
  padding-left: 20px;
  background-color: rgba(4, 22, 42, 0.3);
  outline: none;
  /* border: none; */
  border: 1px solid #0398a5;
}

.sum b {
  width: 48px;
  height: 42px;
  position: absolute;
  right: 21px;
  border-left: 1px solid #0398a5;
}

.sum span,
.phone span {
  display: inline-block;
  background-color: #222f3e;
  width: 42px;
  height: 42px;
  vertical-align: top;
  position: relative;
  left: 6px;
  border: 1px solid #0398a5;
  border-right: none;
}

.sum span img {
  width: 18px;
  vertical-align: bottom;
  position: absolute;
  top: 9px;
  right: 12px;
}

.forget {
  height: 68px;
  text-align: right;
  line-height: 68px;
  color: #fff;
  margin-left: 416px;
}

.yes {
  text-align: center;
}

a {
  text-decoration: none;
  /* color: #fff; */
  color: #818181;
}

.yes a {
  display: inline-block;
  width: 351px;
  height: 52px;
  color: #fff;
  background-color: #1ce3f1;
  text-align: center;
  line-height: 52px;
  font-size: 18px;
  text-decoration: none;
}

.sapn {
  color: #030303;
  float: right;
  margin-right: 10px;
  margin-bottom: 10px;
}

.color a {
  color: #1ee2f5;
}

.color2 a {
  color: #1ee2f5;
}

.account {
  display: none;
}

.moble {
  display: none;
}

.phone {
  width: 100%;
  margin-top: 48px;
  text-align: center;
}

.phone span img {
  position: absolute;
  top: 10px;
  left: 14px;
}

.phone span .as {
  position: absolute;
  top: 15px;
  left: 12px;
}

.phone :nth-child(2) input {
  padding-right: 105px;
}

.phone li {
  margin-top: 50px;
  position: relative;
}

.phone li input {
  border: none;
  padding-left: 10px;
  color: #fff;
  height: 42px;
  width: 80%;
  background: none;
  font-size: 16px;
  /* background-color: #9cbada; */
  background-color: rgba(4, 22, 42, 0.3);
  outline: none;
  border: 1px solid #1ee2f5;
}

.phone a {
  position: absolute;
  background-color: #1ee2f5;
  right: 15px;
  width: 100px;
  height: 42px;
  line-height: 42px;
}

.q {
  margin-top: 50px;
}

.lock {
  position: absolute;
  right: 35px;
  top: 80px;
}

.two input {
  padding-right: 55px;
}

.yz {
  position: absolute;
  right: 22px;
  width: 100px;
  height: 42px;
  background-color: #fff;
}

.sum :nth-child(3) input {
  padding-right: 100px;
}

.log {
  height: 90px;
}

.log {
  position: absolute;
  top: -150px;
}

.log h2 {
  display: inline-block;
  font-weight: 400;
  line-height: 50px;
}

.log p {
  font-size: 16px;
  top: 10px;
}

.tail {
  position: absolute;
  left: -44%;
  bottom: -20%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.Edition {
  position: absolute;
  bottom: -110px;
  left: -120px;
}

.Eye {
  background-color: #cccccc;
}

.el-button {
  padding: 12px 152px;
  background-color: #00f0ff;
  color: #fff;
  border: none;
}

.footer {
  width: 1920px;
  text-align: center;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  bottom: 20px;
}

.footer p {
  margin-top: 5px;
  color: #9a9a9a;
  text-align: center;
}

.BigBox {
  width: 1920px;
  /* height: 100%; */
  position: relative;
  margin: auto;
}

.rotate {
  width: 641px;
  height: 580px;
  background: url(../assets/image/rotate/wai.png) no-repeat;
  position: absolute;
  left: 329px;
  top: 200px;
  border-radius: 50%;
  animation: myrotate 42s infinite linear;
}

.rotate1 {
  background: url(../assets/image/rotate/gear.png) no-repeat;
  width: 305px;
  height: 304px;
  position: absolute;
  left: 167px;
  top: 138px;
  border-radius: 50%;
  animation: myrotate1 42s infinite linear;
}

.rotate2 {
  background: url(../assets/image/rotate/nei.png) no-repeat;
  width: 265px;
  height: 262px;
  position: absolute;
  left: 20px;
  top: 21px;
  border-radius: 50%;
  animation: myrotate2 42s infinite linear;
}

@keyframes myrotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes myrotate1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-720deg);
  }
}

@keyframes myrotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes mymove {
  from {
    transform: rotate(0deg);
    margin-right: -400px;
    margin-top: 0px;
  }
  to {
    transform: rotate(-360deg);
    margin-right: 312px;
    margin-top: 260px;
  }
}

@keyframes sx {
  0% {
    top: 56px;
  }
  50% {
    top: 80px;
  }
  100% {
    top: 56px;
  }
}

.lizi {
  height: 100%;
}
</style>
